<template>
  <div v-show="autoAnnotation.isActive">
    <PanelText name="自动标注设置" />
    <div class="input-group tool-input-group">
      <PanelInputDropdown name="prompt" v-model="prompt" :values="promptOptions" />

    </div>

  </div>
</template>
<script>
import PanelText from "@/components/PanelText";
import PanelInputDropdown from "@/components/PanelInputDropdown";
import PanelInputString from "@/components/PanelInputString";
import PanelButton from "@/components/PanelButton";
import { mapMutations, mapGetters } from "vuex";

export default {
  name: "AutoAnnotationPanel",
  components: { PanelText, PanelInputDropdown, PanelInputString, PanelButton },
  props: {
    autoAnnotation: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      prompt: 0,
      label: -1,
      promptOptions: {
        0: "关键点",
        1: "矩形选框",
        2: "全部标注"
      },
    };
  },
  methods: {
    ...mapMutations(['updateAutoAnnotationPrompt']),
    updatePrompt() {
      this.updateAutoAnnotationPrompt(this.prompt)
    }
  },
  watch: {
    prompt(newValue, oldValue) {
      this.updatePrompt()
    }
  }
};
</script>

<style scoped>
.tool-input-group {
  padding-top: 3px;
}

.tool-option-pre {
  background-color: #383c4a;
}

.tool-option-font {
  border-color: #4b5162;
  background-color: #383c4a;
  color: white;
  font-size: 12px;
  height: 20px;
}

.tool-option-input {
  display: table-cell;
  border-color: #4b5162;
  color: white;
  padding: 0 0 0 3px;
  background-color: #383c4a;
  font-size: 12px;
  height: 20px;
}
</style>